/**
 * 学习目标：React中this指向问题、处理办法
 *
 * 处理办法：
 *    原理：箭头函数没有this，由所调用的环境决定this 是谁
 *    1. render方法中，使用箭头函数
 *    2. 使用实例方法，箭头函数会将this自动指向实例对象本身
 */

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 0,
  };

  // React自带结构体，this被源码处理过，this可以正常指向组件实例
  render() {
    return (
      <div>
        <button
          // 1. render方法中，this指向正确，使用箭头函数可以获得render中的this
          // 完整写法
          // onClick={() => {
          //   this.handleClickyyy();
          // }}
          // 👍推荐写法
          onClick={this.handleClickyyy}
        >
          点我打印count
        </button>

        <button onClick={this.handleClickxxx}>点我打印count</button>
      </div>
    );
  }

  handleClickyyy() {
    console.log('this  ----->  ', this.state.count);
  }

  // 非自带结构体，this指向undefined
  // 2. 使用实例方法，箭头函数会将this自动指向实例对象本身
  handleClickxxx = () => {
    console.log('this  ----->  ', this.state.count);
  };
}

ReactDOM.render(<App></App>, document.getElementById('root'));
